<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@include file="blocks/header.jsp" %>

<style type="text/css" media="all">
    #registrationDoctorForm .popover {
        background-color: #f2dede;
    }
    #registrationDoctorForm .popover-title {
        background-color: #f2dede;
    }
</style>

<div class="row-fluid">
    <div class="span4 offset4">
        <form class="form-horizontal" id="registrationDoctorForm">
            <h4>Персональная информация</h4>
                <div class="control-group">
                    <label class="control-label" for="inputFullName">ФИО*</label>
                    <div class="controls">
                        <input type="text" id="inputFullName" placeholder="ФИО" name="fullName">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="inputCountry">Страна*</label>
                    <div class="controls">
                        <input type="text" id="inputCountry" placeholder="Страна" name="country">
                    </div>
                    <label class="control-label" for="inputState">Область*</label>
                    <div class="controls">
                        <input type="text" id="inputState" placeholder="Область" name="state">
                    </div>
                    <label class="control-label" for="inputCity">Город/населенный пункт*</label>
                    <div class="controls">
                        <input type="text" id="inputCity" placeholder="Город/населенный пункт" name="city">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="inputSpecialization">Специализация*</label>
                    <div class="controls">
                        <input type="text" id="inputSpecialization" placeholder="Специализация" name="specialization">
                    </div>

                    <label class="control-label" for="inputHospitalName">Медучреждение*</label>
                    <div class="controls">
                        <input type="text" id="inputHospitalName" placeholder="Медучреждение" name="hospitalName">
                    </div>

                    <label class="control-label" for="inputHospitalAdress">Адрес медучреждения*</label>
                    <div class="controls">
                        <input type="text" id="inputHospitalAdress" placeholder="Адрес медучреждения" name="hospitalAdress">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="inputEmail">Email*</label>
                    <div class="controls">
                        <input type="text" id="inputEmail" placeholder="Email" name="email">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="inputPhone">Номер телефона*</label>
                    <div class="controls">
                        <input type="text" id="inputPhone" placeholder="Номер телефона" name="telephoneNumber">
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label" for="inputPassword">Пароль*</label>
                    <div class="controls">
                        <input type="password" id="inputPassword" placeholder="Пароль" name="password">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputRepassword">Повторите пароль*</label>
                    <div class="controls">
                        <input type="password" id="inputRepassword" placeholder="Повторите пароль" name="repassword">
                    </div>
                </div>
            <hr/>
            <div class="control-group">
                <div class="controls">
                    <div id="reg-captcha" style="text-align: center; padding-bottom: 5px;"></div>
                    <input type="text" name="captchaCode" placeholder="Введите код с картинки" size="30" />
                </div>
            </div>

            <hr/>
            <div class="control-group">
                <div class="controls">
                    <button type="submit" class="btn">Регистрация</button>
                </div>
            </div>
        </form>

        <script>
            $(function(){

                function validateEmail(email) {
                    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
                    return re.test($.trim(email));
                }

                function reloadCaptcha() {
                    var image = new Image();
                    image.onload = function() {
                        $("#reg-captcha").html(image);
                    }
                    image.width = 215;
                    image.height = 50;
                    image.src = '<c:url value="/captcha-image.html" />'+"?i="+Math.random();
                }

                reloadCaptcha();

                $("#registrationDoctorForm [type=submit]").click(function() {

                    var $form = $("#registrationDoctorForm");
                    var form = $("#registrationDoctorForm")[0];
                    $form.find("input").popover('destroy');

                    var errorStatus = false;
                    var errorEl = undefined;
                    function error(select, title, msg) {
                        $form.find(select).popover({
                            title: title,
                            content: msg,
                            placement: "right"
                        });
                        $form.find(select).popover('show');

                        errorStatus = true;
                        if (!errorEl) {
                            errorEl = select;
                        }
                    }

                    if (!form.fullName.value) {
                        error("[name=fullName]", undefined, "Укажите ФИО!");
                    }

                    if (!form.country.value || !form.city.value || !form.state.value) {
                        error("[name=country]", undefined, "Укажите адрес!");
                    }

                    if (!form.specialization.value) {
                        error("[name=specialization]", undefined, "Укажите специализацию!");
                    }

                    if (!form.hospitalName.value) {
                        error("[name=hospitalName]", undefined, "Укажите медучреждение!");
                    }

                    if (!form.hospitalAdress.value) {
                        error("[name=hospitalAdress]", undefined, "Укажите адрес медучреждения!");
                    }

                    if (!form.email.value || !validateEmail(form.email.value)) {
                        error("[name=email]", "Укажите элетронный адрес", "Элетронный адрес нужен для входа в систему");
                    }
                    if (!form.telephoneNumber.value) {
                        error("[name=telephoneNumber]", undefined, "Укажите номер телефона!");
                    }
                    if (!$.trim(form.password.value)) {
                        error("[name=password]", undefined, "Укажите пароль!");
                    } else if ($.trim(form.password.value).length < 6) {
                        error("[name=password]", undefined, "Пароль должен не менее 6 символов!");
                    } else if ($.trim(form.password.value) != $.trim(form.repassword.value)) {
                        error("[name=repassword]", undefined, "Пароли должны совпадать!");
                    }

                    if (!form.captchaCode.value) {
                        error("[name=captchaCode]", undefined, "Введите код с картинки!");
                    }

                    if (errorStatus) {
                        $.scrollTo($(errorEl).offset().top - $('body > .navbar').height() - 10, 200);
                    } else {
                        $.ajax({url: '/registration-doctor.json',
                            type: "POST",
                            data: $form.serialize(),
                            dataType: 'JSON',
                            success: function(data, status) {
                                console.log(data);
                                if (data.error) {
                                    switch (data.code) {
                                        case "CAPTCHA_ERROR":
                                            error("[name=captchaCode]", undefined, "Неправильынй код!");
                                            $.scrollTo($(errorEl).offset().top - $('body > .navbar').height() - 10, 200);
                                            break;
                                        case "USER_EXIST_ERROR_CODE":
                                            $('#errorModal > div.modal-body').html('<p>Пользователь с электронным адресом ' + $.trim(form.email.value) + ' зарегестрированный в системе.<br/>Возможно это вы. Попробуйте <a href="#">востановить аккаунт</a></p>');
                                            $('#errorModal').modal("show");
                                            break;
                                        case "NOT_FOUND_ADMIN_CODE":
                                            $('#errorModal > div.modal-body').html('<p>В данный момент нету достпных администраторов</p>');
                                            $('#errorModal').modal("show");
                                            break;
                                        default:
                                            $('#errorModal > div.modal-body').html('<p>' + data.errorMessage + '</p>');
                                            $('#errorModal').modal("show");
                                    }
                                    reloadCaptcha();

                                } else {
                                    $('#sucessRegistrationModal').on('hidden', function () {
                                        location.pathname = "/";
                                    })
                                    $('#sucessRegistrationModal').modal("show");
                                }
                            }
                        });
                    }


                    return false;
                });
            });
        </script>
    </div>
</div>

<div id="errorModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Ошибка</h3>
    </div>
    <div class="modal-body">
        <p></p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Ok</button>
    </div>
</div>

<div id="sucessRegistrationModal" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Регистрация</h3>
    </div>
    <div class="modal-body">
        <p>Вы успешно зарегестрировались. Ожидайте подтверждение администратором вашей регистрации</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Ok</button>
    </div>
</div>

<%@include file="blocks/footer.jsp" %>